<template>
  <div class="app" @mousemove="mouseMove">
    <h2>鼠标在当前元素内的x轴坐标--{{ mouseX }}</h2>
    <h2>鼠标在当前元素内的y轴坐标--{{ mouseY }}</h2>
    <button @click="getDog">点击加载图片</button>
    <img width="300" :src="dogUrl" alt="" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from "vue";
//1.鼠标移动打印坐标的效果
const mouseX = ref(0);
const mouseY = ref(0);
const mouseMove = (e: MouseEvent) => {
  mouseX.value = e.clientX;
  mouseY.value = e.clientY;
};
onMounted(() => {
  console.log("鼠标位置初始化");
});

//2.点击加载狗的图片
const dogUrl = ref("");
const getDog = async () => {
  const result = await axios.get(`https://dog.ceo/api/breeds/image/random`);
  dogUrl.value = result.data.message;
};
onMounted(() => {
  console.log("dog图片初始化");
});
</script>

<style scoped>
.app {
  width: 100%;
  height: 500px;
  border: 1px solid #000;
}
</style>
